<template>
  <div class="result">
    <div class="result_item" style="margin-bottom: 15px">
      <div class="result_left">搜索历史</div>
      <div><span>清空</span><van-icon name="delete-o" /></div>
    </div>
    <div class="item" v-for="(item, index) in list">
      <div class="result_item">
        <div class="result_left">{{ item.label }}</div>
        <div class="unfold">
          <span>展开</span
          ><van-icon
            v-if="!item.isShow"
            @click="unfold(index, item)"
            name="arrow-down"
          /><van-icon v-else @click="unfold(index, item)" name="arrow-up" />
        </div>
      </div>
      <div class="content hidden" ref="item">
        <van-tag
          color="#f2f4f5"
          text-color="#333"
          class="tag"
          v-for="item in item.items"
          round
          type="primary"
          >{{ item.label }}</van-tag
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import useSearchStore from "@/stores/modules/search";
import { storeToRefs } from "pinia";
const searchStore = useSearchStore();
const { list } = storeToRefs(searchStore);
const item = ref([]);
const unfold = (index, items) => {
  if (!items.isShow) {
    item.value[index].classList.remove("hidden");
  } else {
    item.value[index].classList.add("hidden");
  }
  items.isShow = !items.isShow;
};
</script>
<style lang="less" scoped>
.result_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  .result_left {
    border-left: 3px solid var(--primary-color);
    padding-left: 2px;
  }
  .unfold {
    color: #ccc;
  }
}
.item {
  margin-bottom: 9px;
  .content {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 15px 10px;
    margin-bottom: 8px;
    margin-top: 5px;
    transition: all 1.8s;
    .tag {
      margin: 0 4px 5px;
      height: 20px;
    }
  }
  .hidden {
    height: 38px;
    overflow: hidden;
  }
}
</style>
